<template>
  <scroll-view
    enable-back-to-top
    scroll-y
    class="customer"
    :refresher-triggered="isTriggered"
    @refresherrefresh="onRefresherrefresh"
    @scrolltolower="getCustomerLogData"
  >
    <u-cell-group :border="false">
      <u-cell
        v-for="(row, index) in customerLogList"
        :key="index"
        :title="row?.abstractText"
        :label="row?.createTime"
      ></u-cell>
    </u-cell-group>
    <u-empty v-show="isFinish && customerLogList.length === 0" mode="history" />
    <u-loadmore v-if="isLoading" status="loading" />
    <u-loadmore v-if="isFinish && customerLogList.length > 0" status="nomore" />
  </scroll-view>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { getCustomerLogListAPI } from '@/services/customer'

const props = defineProps<{
  customerId: string
}>()
// 请求参数
const queryParams: Required<any> = {
  customerId: props.customerId,
  pageNum: 1,
  pageSize: 10,
}
const isFinish = ref(false)
// 是否触发下拉刷新
const isTriggered = ref(false)
// 获取订单列表
const customerLogList = ref<any[]>([])
// 是否加载中标记，用于防止滚动触底触发多次请求
const isLoading = ref(false)
// 自定义下拉刷新被触发
const onRefresherrefresh = async () => {
  // 开始动画
  isTriggered.value = true
  // 重置数据
  queryParams.page = 1
  customerLogList.value = []
  isFinish.value = false
  // 加载数据
  await getCustomerLogData()
  // 关闭动画
  isTriggered.value = false
}
const getCustomerLogData = async () => {
  // 如果数据出于加载中，退出函数
  if (isLoading.value) return
  // 退出分页判断
  if (isFinish.value === true) {
    return
  }
  // 发送请求前，标记为加载中
  isLoading.value = true
  // 发送请求
  const res = await getCustomerLogListAPI(queryParams)
  // 发送请求后，重置标记
  isLoading.value = false
  // 数组追加
  customerLogList.value.push(...res.rows)
  // 分页条件
  if (customerLogList.value.length < res.total) {
    // 页码累加
    queryParams.pageNum++
  } else {
    // 分页已结束
    isFinish.value = true
  }
}

// 组件挂载完毕
onMounted(() => {
  getCustomerLogData()
})
</script>

<style scoped lang="scss"></style>
